<template>
<div class="components-container">
  <!-- <code>This is based on
      <a
        class="link-type"
        href="//github.com/dai-siki/vue-image-crop-upload"
      > vue-image-crop-upload</a>.
      {{ $t('components.imageUploadTips') }}
    </code> -->
  <!-- <pan-thumb :image="image"/>

    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar
    </el-button> -->
  <!-- <image-cropper
      v-show="imagecropperShow"
      :width="300"
      :height="300"
      :key="imagecropperKey"
      url="https://httpbin.org/post"
      lang-type="en"
      @close="close"
      @crop-upload-success="cropSuccess"/> -->

  <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
    <el-button size="small">取消</el-button>
    <el-button size="small" type="primary">保存</el-button>
  </div>
  <div class="wlm-form">
    <div class="wlm-form-header">分销设置</div>
    <div class="wlm-form-content">
      <el-form :model="testFrom" size="small" label-width="120px" class="retail-form" label-position="right">
        <el-form-item label="分销层级">
          <el-radio-group v-model="radio2">
            <el-radio :label="1">备选项</el-radio>
            <el-radio :label="2">备选项</el-radio>
            <el-radio :label="3">备选项</el-radio>
          </el-radio-group>
          <div class="form-help">默认佣金比例请到<el-button type="text">分销商等级</el-button>进行设置</div>
        </el-form-item>
        <el-form-item label="分销内购">
          <el-radio-group v-model="radio2">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要审核">
          <el-radio-group v-model="radio2">
            <el-radio :label="1">需要</el-radio>
            <el-radio :label="2">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <div class="wlm-form">
    <div class="wlm-form-header">结算设置</div>
    <div class="wlm-form-content">
      <el-form :model="testFrom" size="small" label-width="120px" class="retail-form" label-position="right">
        <el-form-item label="佣金计算方式">
          <el-radio-group v-model="radio2">
            <el-radio :label="1">备选项</el-radio>
            <el-radio :label="2">备选项</el-radio>
            <el-radio :label="3">备选项</el-radio>
          </el-radio-group>
          <div class="form-help">商品折后价：[会员价-满减（或折扣）]*佣金比例</div>
          <div class="form-help">实际支付：[实际支付金额-运费]*佣金比例</div>
        </el-form-item>
        <el-form-item label="最低提现额度">
          <el-input placeholder="请输入内容" v-model="input4">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="免手续费区间">
          <div class="flex-row min-input">
            <el-input v-model="input4">
              <template slot="append">元</template>
            </el-input>
            <span>至</span>
            <el-input v-model="input4">
              <template slot="append">元</template>
            </el-input>
          </div>
          <div class="form-help">当提现手续费金额在此区间时，不扣除提现手续费</div>
        </el-form-item>
        <el-form-item label="结算天数">
          <div class="flex-row min-input">
            <span>订单确认收货后</span>
            <el-input v-model="input4">
              <template slot="append">天</template>
            </el-input>
            <span>能申请提现</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <div class="wlm-form">
    <div class="wlm-form-header">提现方式</div>
    <div class="wlm-form-content">
      <el-form :model="testFrom" size="small" label-width="120px" class="retail-form" label-position="right">
        <el-form-item label="提现审核">
          <el-radio-group v-model="radio2">
            <el-radio :label="1">手动审核</el-radio>
            <el-radio :label="2">自动审核</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提现方式">
          <el-checkbox-group v-model="options">
            <el-checkbox label="提现到商城余额"></el-checkbox>
            <el-checkbox label="提现到微信钱包"></el-checkbox>
            <el-checkbox label="手动提现"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="分销商名称">
          <el-input placeholder="分销商名称"></el-input>
        </el-form-item>
        <el-form-item label="级别名称">
          <div class="flex-row min-input">
            <el-input v-model="input4">
            </el-input>
            <el-input v-model="input4">
            </el-input>
            <el-input v-model="input4">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="支持银行卡">
          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="dynamicForm" size="small">
            <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" :prop="'domains.' + index + '.value'">
              <el-input placeholder="请填写银行名称" v-model="domain.value"></el-input>
              <el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-plus" type="primary" @click="addDomain">添加</el-button>
            </el-form-item>
          </el-form>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <div class="wlm-table">
    <div class="wlm-table-hearder-btn">
      <el-button size="small" type="primary">新建商品</el-button>
      <el-button size="small" type="success">商品导入</el-button>
    </div>
    <div class="wlm-table-header">
      <el-form :model="testFrom" size="small" label-width="80px" class="retail-form" label-position="right">
        <el-form-item label="搜索：" class="search">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="input" placeholder="公告名称" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="下单时间：" class="picker">
          <el-date-picker v-model="value7" type="datetimerange" :default-time="['00:00:00', '23:59:59']" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" class="filter">
          <el-form-item label="商品名称：">
            <el-input v-model="input" placeholder="请输入内容" style="width:160px;"></el-input>
          </el-form-item>
          <el-form-item label="销售渠道：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="" class="filter">
          <el-form-item label="订单状态：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退款状态：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配送方式：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="" class="filter">
          <el-form-item label="支付方式：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否加星：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="" class="filter-btns">
          <el-button type="primary">筛选</el-button>
          <el-button>导出报表</el-button>
          <el-button>查看报表</el-button>
          <el-button type="text">清空筛选条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wlm-table-content">
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="all">全部</el-tab-pane>
        <el-tab-pane label="配置管理" name="application">完整应用</el-tab-pane>
        <el-tab-pane label="角色管理" name="developmentTest">开发测试</el-tab-pane>
        <el-tab-pane label="编辑器" name="editor">编辑器</el-tab-pane>
        <el-tab-pane label="云储存" name="cloudStorage">云储存</el-tab-pane>
        <el-tab-pane label="短信验证" name="SMSverification">短信验证</el-tab-pane>
        <el-tab-pane label="接口整合" name="InterfaceIntegration">接口整合</el-tab-pane>
        <el-tab-pane label="辅助增强" name="auxiliaryEnhancement">辅助增强</el-tab-pane>
        <el-tab-pane label="未归类" name="uncategorized">未归类</el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column sortable prop="date" label="商品名称" width="380">
        </el-table-column>
        <el-table-column prop="name" label="库存单位" width="380">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex-row flex-align-c">
              <el-button type="text">编辑</el-button>
              <div class="btn-line"></div>
              <el-button type="text">发到门店</el-button>
              <div class="btn-line"></div>
              <el-button type="text">发到网店</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-content flex-row flex-justify-b flex-align-c">
        <el-row class="pagination-btns">
          <el-button class="right-8" :disabled="!isGroup" size="mini" @click="delListDataItem('group','vip')">删除</el-button>
          <el-button class="right-8" :disabled="!isGroup" size="mini" @click="delListDataItem('group','vip')">下架</el-button>
          <el-select class="right-8" size="mini" v-model="value" placeholder="批量发布到">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button class="right-8" :disabled="!isGroup" size="mini" @click="delListDataItem('group','vip')">删除</el-button>
          <el-select class="right-8" size="mini" v-model="value" placeholder="批量发布到">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-row>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: 'AvatarUploadDemo',
  components: {
    ImageCropper,
    PanThumb
  },
  directives: {

  },
  data() {
    return {
      testFrom: [{
        text: 'ff'
      }],
      input: 'kk',
      currentPage4: 4,
      radio2: 1,
      input4: '123',
      activeName2: 'cloudStorage',
      imagecropperShow: false,
      imagecropperKey: 0,
      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
      value7: '',
      options: [],
      tableData: [{
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2017-06-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      }
    }
  },
  methods: {
    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.image = resData.files.avatar
    },
    close() {
      this.imagecropperShow = false
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
</style>
